<template>
  <dvan-form @failed="onFailed">
    <!-- 頭部 -->
    <van-nav-bar :title="t">
      <template #left  >
        <a @click="onClickLeft" style="color:#288ef4">
        取消
        </a>
      </template>
      <template #right>
        <van-button
          type="primary"
          size="small"
          @click="onSubmit"
        >提交</van-button>
      </template>
    </van-nav-bar>

    <!-- body -->
    <div class="card">
      <div class="card-body">
        <!-- <van-field
          v-model="formData.taskAcceptRemark"
          type="textarea"
          placeholder="请说明你的求助内容…"
          maxlength="1000"
          show-word-limit
        /> -->
         <div class="area-body" >
          <textarea class="area" maxlength="1000" v-model="formData.taskAcceptRemark" cols="30" rows="10" placeholder="请填写你的任务总结" ></textarea>
        </div>
        <van-uploader
          accept='image/*'
          multiple='true'
          max-count='3'
          v-model="fileData"
          :after-read="uploadFile"
          :before-delete="deleteFile"
        >
        <div class="van-uploader__upload"><i class="van-badge__wrapper van-badge__wrapper van-icon van-icon-plus" style="font-size:1rem;color:#999;"></i><input type="file" class="van-uploader__input" accept="image/*"></div>
        </van-uploader>
      </div>
    </div>
  </dvan-form>
</template>

<style lang="less" scoped>
.area-body{
  font-size: 32px;
  font-weight: 400;
  .area{
    width: 100%;
    border: none;
    height: 50px;
  }
}
a {
  font-size: 32px;
}
.search-body {
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12);
  margin-bottom: 0.3125rem;
}
.card {
  margin-top: 30px;
  background: #fff;
  text-align: left;
  padding: 30px;
  .card-head {
    font-size: 32px;
    img {
      width: 32px;
      height: 32px;
      margin: -5px 15px;
    }
  }
  .befor-head {
    padding: 30px;
    color: #999999;
    font-size: 28px;
    img {
      width: 32px;
      height: 32px;
      float: right;
    }
  }
  .card-body {
    background: #ffffff;
    font-size: 28px;
    .img-body {
      width: 196px;
      height: 196px;
    }
    textarea {
      min-height: 200px;
    }
  }
}
</style>
<script>
import { Button, NavBar, Uploader, Tag, Search, field, Toast,Dialog } from "vant";
import httpRequest from "../../util/httpRequest";
import { useRouter } from "vue-router";
/**

 */
export default {
  components: {
    [Button.name]: Button,
    [NavBar.name]: NavBar,
    [Uploader.name]: Uploader,
    [Tag.name]: Tag,
    [Search.name]: Search,
    [field.name]: field,
    [Dialog.name]: Dialog,
    [Toast.name]: Toast
  },
  data() {
    return {
      t:'',
      formData: {},
      type: "",
      fileData:[],
      fileList:[],
      router: useRouter()
    };
  },
  // 注意：组件挂载后才能访问到 ref 对象
  mounted() {
    this.formData.taskAccpetId = this.router.currentRoute.query.taskAccpetId;
    this.formData.taskAcceptStatus = this.router.currentRoute.query.taskAcceptStatus;
    this.type = this.router.currentRoute.query.type;
    this.t = this.type == 'del' ? '任务取消' : '任务完成';
  },
  methods: {
    onClickLeft() {
      if (
        this.formData["taskAcceptRemark"]       
      ) {
        Dialog.confirm({
          message: "退出编辑后内容不会保留"
        }).then(() => {
          this.$router.back();
        });
      } else {
        this.$router.back();
      }
    },
    onSubmit() {
      let url =
        this.type == "del" ? "接单人取消接单任务" : "接单人完成接单任务";
      if (this.formData["taskAcceptRemark"]) {
        this.formData.resourcesURL = [];
          for (let i = 0; i < this.fileList.length; i++) {
            const element = this.fileList[i];
            this.formData.resourcesURL.push(element.url);
          }
        httpRequest.post(url, this.formData).then(res => {
          res.result == 'SUCCESS' ? Toast.success(res.data): Toast.fail(res.msg) ;
          this.$router.back();
        });
      } else {
         Toast.fail("注意：请填写结论！");
      }
    },
    async uploadFile(value) {
      if (value.length > 0) {
        for (let i = 0; i < value.length; i++) {
          value[i].status = "uploading";
          await this.poshImg(value[i]);
        }
      } else {
        this.poshImg(value);
      }
    },
    async poshImg(value) {
      await httpRequest
        .uploadFileByFormData(value.file)
        .then(res => {
          if (res.result === "SUCCESS") {
            this.fileList.push({ url: res.data });
            value.status = "";
          } else {
            value.status = "failed";
            value.message = "上传失败";
          }
        })
        .catch(() => {
          value.status = "failed";
          value.message = "上传失败";
        });
    },
    deleteFile(value, detail) {
      if (value.status !== "failed") {
        this.fileList.splice(detail.i, 1);
      }
      return true;
    }
  }
};
</script>
